<template>
  <div>
		<navbar title="报价详情" :disabled="true"></navbar>
        <div style="position:relative;top:46px;">


            <van-cell-group>
                <van-cell>
                    <template slot="title">
                        <div class="totalPremium">
                            <div class="total_ti"><img src="../assets/u360.png" alt=""> <span>泰山车险</span> </div>
                            <div class="total_con"><span>{{totalPremium}}</span> 元</div>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>



             <div style="padding:0.2rem ;     font-size: 0.35rem;">报价详情:</div>
              <van-cell-group>
                <van-cell title="交强险（车船税：代缴）" :value="'¥'+jiaoQ" />
            </van-cell-group>
            <div class = 'con'>
                <div class='con_c'>
                    <div>交强险</div>
                    <div style="text-align:right;">22</div>
                </div>
                  <div class='con_c'>
                       <div>车船税</div>
                    <div style="text-align:right;">22</div>
                </div>
                  <div class='con_c'>
                     <div>起保时间</div>
                    <div style="text-align:right;">22</div>
                </div>
            </div>


              <van-cell-group>
                <van-cell title="商业险" :value="'¥'+businessPremium" />
            </van-cell-group>
            <div class = 'con'>
                <div class='con_c'>
                    <div>险别</div>
                    <div>保险金额（¥）</div>
                    <div style="text-align:right;">保费（¥）</div>
                </div>

                <div class='con_c'>
                    <div>交强险</div>
                    <div>11</div>
                    <div style="text-align:right;">22</div>
                </div>
                  <div class='con_c'>
                       <div>车船税</div>
                       <div>22</div>
                    <div style="text-align:right;">22</div>
                </div>
                  <div class='con_c'>
                     <div>起保时间</div>
                     <div>33</div>
                    <div style="text-align:right;">22</div>
                </div>
            </div>
           

              <van-cell-group>
                <van-cell title="车辆信息"  />
            </van-cell-group>
            <div class = 'con'>
            

                <div class='con_c'>
                    <div>车牌号码</div>
                    <div style="text-align:right;">{{licenseNo}}</div>



                </div>
                  <div class='con_c'>
                       <div>品牌型号</div>
                    <div style="text-align:right;">{{value}}</div>
                </div>
                  <div class='con_c'>
                     <div>车架号</div>
                    <div style="text-align:right;">{{frameNo}}</div>
                </div>
                 <div class='con_c'>
                     <div>发动机号</div>
                    <div style="text-align:right;">{{engineNo}}</div>
                </div>
                 <div class='con_c'>
                     <div>注册日期</div>
                    <div style="text-align:right;">{{licenseDate}}</div>
                </div>
            </div>
        </div>



         <div class="btnCon"> 
        <van-button size="large" type="default" @click="toAdd">立即投保</van-button>
        </div>
       
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";

export default {
  components: { navbar },
  data() {
    return {
         totalPremium:'',
        businessPremium:'',
        forcePremium:'',
        sumPayTax:'',
        jiaoQ:'',

        licenseNo:'',
        licenseDate:'',
        frameNo:'',
        engineNo:'',
        value:'',
        baseInfo: window.localStorage.getItem("baseInfo")
    }
  },
  mounted(){
      if(this.$route.query.licenseNo){
          this.licenseNo = this.$route.query.licenseNo
      }
       if(this.$route.query.licenseDate){
          this.licenseDate = this.$route.query.licenseDate
      }
     if(this.$route.query.frameNo){
          this.frameNo = this.$route.query.frameNo
      }
      if(this.$route.query.engineNo){
          this.engineNo = this.$route.query.engineNo
      }
      if(this.$route.query.value){
          this.value = this.$route.query.value
      }

     


       if(this.$route.query.totalPremium){
          this.totalPremium = this.$route.query.totalPremium
      }
      if(this.$route.query.businessPremium){
          this.businessPremium = this.$route.query.businessPremium
      }
      if(this.$route.query.forcePremium){
          this.forcePremium = this.$route.query.forcePremium
      }
       if(this.$route.query.sumPayTax){
          this.sumPayTax = this.$route.query.sumPayTax
      }
      console.log()
      this.jiaoQ=Number(this.forcePremium)+Number(this.sumPayTax)


     
    // if(this.$route.query.customMemberCode){
    //       this.customMemberCode = this.$route.query.customMemberCode
    //   }
    //    if(this.$route.query.ebusinessNo){
    //       this.ebusinessNo = this.$route.query.ebusinessNo
    //   }
    //    if(this.$route.query.orderId){
    //       this.orderId = this.$route.query.orderId
    //   }
    //    if(this.$route.query.userCode){
    //       this.userCode = this.$route.query.userCode
    //   }
    //    if(this.$route.query.userPassword){
    //       this.userPassword = this.$route.query.userPassword
    //   }
     console.log(this.baseInfo)
  },
  methods: {
      tihe(){
          
      },
      toAdd:function(){
          this.$router.push({
                name: "listAddress",
                query: {

                }
            })
      }
  }
};
</script>
<style scoped lang="scss">
    .con{
        padding: 10px 15px;
        background: #fff;
        .con_c{
            display: flex;
           div{
               width: 50%;

           }
        }
    }
     .btnCon{
        width: 10rem;
        position: fixed;
        bottom: 0;
        background: #fff;
    }
    .totalPremium{
        width: 100%;
        text-align: center;
        padding: 0.3rem 0;
        .total_ti{
            margin-bottom: 0.3rem;
            img{
                width: 16px;
                position: relative;
                top:3px;
            }
            span{
                line-height: 24px;
            }
        }
        .total_con{
           span{
                font-size: 28px;
                color: #000000;
           }
        }
    }
</style>
